Responsiv design syftar till att en webbsida ska anpassa sig efter anva?ndarens enhet, oavsett enhetens ska?rmstorlek. Arbetet har ga?tt ut pa? att ta reda pa? om man kan utveckla en framga?ngsrik Responsiv design som fungerar pa? ma?nga typer av enheter enbart med en persondator som utvecklingsplattform, och pa? sa? sa?tt undvika att beho?va genomga? en stor process med testning. Resultaten visar att det a?r fullt mo?jligt. .

Den här rapporten förklarar tillvägagångssättet för framtagningen utav en Responsiv design till webbplatsen Projects & Staff, en webbplats som tidigare hade en fixed design. Projektet består utav två leveranser, hi-fi prototyper skapade i Adobe Illustrator och Adobe Photoshop samt en färdig mobilversion utav webbplatsen, utvecklad med CSS3. Under projektets gång har jag designat för användarupplevelse och användbarhet, två områden som är viktiga inom responsiv webbdesign. Jag har utfört en förstudie i form av en webbplatsanalys, gjort en PACT-analys samt användarintervjuer. Detta för att definiera behoven som fanns för en Responsiv design, samt att få en tydlig bild av användare och deras vanor.

Denna rapport redovisar för design- och utvecklingsprocessen i byggandet av en responsiv webbsida. Webbsidan skapades för användning av den blivande spelstudion Rocket Luncher Studios. Wordpress som CMS (Content Management System) har används som innehålls-hanteringssystem för att förenkla uppdatering av webbsidan av uppdragsgivaren själva. Webbsidan är kodad utifrån Luke Wroblewskis ?mobile-first?-tänk, vilket börjar med att fokusera designen på mindre skärmar för att sedan anpassa innehållet mot större skärmstorlekar.

Mångfalden av enheter för webbanvändning ökar, men det finns fortfarande webbplatser som utvecklas med PC:s som enda prioritet. Responsiv webbdesign erbjuder nya möjligheter till webbutveckling eftersom en responsiv webbplats är anpassad till samtliga enheter på marknaden. Området har förvisso fått stort genomslag, men det är fortfarande nytt och relativt outforskat. Det finns också endel utmaningar med responsiv webbdesign som kan vara svåra att bemöta. Uppsatsen kartlägger utmaningar som lyfts fram i vetenskaplig litteratur, och bekräftar eller dementerar samt kompletterar kartlagda utmaningar genom enempirisk studie.

Avsaknad av en hemsida medför att många kunder kan gå förlorade för ett företag. Om det trots allt finns en webbsida som beskriver företagets verksamhet finns det fortfarande risk att mista kunder om sidan inte är anpassad efter den enhet som besökaren använder. I dagens samhälle är det mer regel än undantag att webbsidor besöks med olika enheter och upplösningar. En lösning på problemet är att använda responsiv webbdesign för att skapa en flexibel design. M&R Mekan & Konstruktion i Skellefteå AB har inte haft någon hemsida att presentera sin verksamhet med för varken potentiella eller befintliga kunder.

De allra flesta sidor idag använder en så kallad fixed design där sidan är gjord för en specifik skärmstorlek. Det finns nu metoder i HTML och CSS att låta sidan forma om sig efter användarens skärmstorlek utan att använda JavaScript. Denna teknik kallas responsiv webbdesign. Syftet med detta arbete är att studera responsiv webbdesign; hur det fungerar och om det är framtiden inom webbdesign. Studien har begränsats till moderna webbläsare och moderna mobiltelefoner för att se resultatet.

In my study, I have chosen to examine how the user interface and content must conform to design guidelines for responsive design makes it suitable for diverse desktop environment and for varied mobile platforms. The purpose of this study is to examine the extent recommended design guidelines based on scientific research has a positive impact on user performance and perception when using this study delivered hi-fi prototype. The goal of this study is to provide a Hi-Fi prototype with high usability that will introduce and inform the public about BrasilCine according specifications. Study findings from user testing and supplementary questionnaires show that the implemented technologies as design guidelines for responsive design and design features have a positive impact on user performance and perception. The study results are therefore relevant for further prototype development..

Det blir allt vanligare att ägare till webbplatser anpassar sin webbplats till lågupplösta enheter som t. ex mobiltelefoner. För att genomföra en anpassning finns flera tekniska alternativ. I denna uppsats har det undersökts vilka tekniska aspekter som kan utgöra eventuella hinder när utvecklare möter webbyråkunders krav på upplösningsoberoende design med en av teknikerna, nämligen responsiv webbdesign. Arbetet innefattar en intervju med en webbyråkund som resulterade i en kravspecifikation som sedan stod till grund för en prototyp, där tekniken responsiv webbdesign testades och utvärderades.

Studien fokuserar på ett förbättrat stöd för mus- och touchinteraktioner för responsiv webbutveckling, då man utvecklar en enhetlig webblösnings för alla enheter..

The IT industry is constantly evolving and it's more or less a requirement today for web developers to be familiar with and to be able to develop for all platforms. A technique that has taken hold and is now widely used is responsive design. Developing responsive design means adapting the layout to the viewing environment; the screen size. Another useful method when developing for different devices is the mobile first theory, which means developing for the mobile screen first. This is done to scale down the site and to clear unnecessary information in order to provide a better user experience.

Följande projektarbetet har resulterat i en ny webbplats åt verkstadsföretaget Löfman & Co Verkstad AB,resultatet är sprunget ur WordPress och projektet vilar på en teoretiskt grund av läsbarhetsteori samtbeprövad erfarenhet kring ämnet Responsiv design. Projektrapporten innehåller både information gällandedet teoretiska ramverket samt de slutgiltiga tekniska lösningarna som implementerades på webbplatsen.Två kvalitativa undersökningar på företagets gamla webbplats har bidraget med ytterligare underlag förskapandet utav företagets nya webbplats.. Utöver det ha en viktig del i utvecklingen gjorts av den ständigakontakten med kunden. Projektresultatet är ett bevis för att det finns en arbetsmarknadsmässig funktionför de studenter som läst Visuell Kommunikation och Design vid Karlstad Universitet..

Smarta klockor, små kroppsnära datorer som bärs kring handleden, ökar i popularitet. Smartaklockor kan visa tiden men även köra andra applikationer. Utmärkande för alla smarta klockorär deras lilla skärmyta, vilket ställer särskilda krav på utformningen av användargränssnitt.Syftet med detta arbete är att utforska hur smarta klockor kan fungera för att visa webbinnehålloch det görs genom att studera hur responsiv webbutveckling kan användas för att möjliggörawebbanvändning med smarta klockor.Experiment med responsiv webbutveckling för smarta klockor ledde fram till fyra prototypersom testades av användare. Under testerna diskuterades fördelar och nackdelar medprototyperna.Resultatet visar att responsiv webbdesign kan användas för att anpassa webbsidor till smartaklockor, men att webbsidor med mycket innehåll bör brytas ner i mindre delar och visas en itaget, något som inte ingår i responsiv webbdesign..

Denna studie syftar till att utveckla tumregler för heuristisk utvärdering av typografi i responsiva gränssnitt. Genom att kombinera traditionella typografiska designprinciper med principer för responsiv webbdesign har tolv tumregler tagits fram. Dessa tumregler har i två heuristiska utvärderingar använts av grafiska designers och gränssnittsutvecklare. De båda grupperna har dessutom fått ge sin syn på upplevelsen av att använda tumreglerna. Tumreglernas förmåga att vägleda till hittade typografiska problem i två responsiva gränssnitt har analyserats och framförallt gränssnittsutvecklarnas resultat har varit i fokus, då målet varit att tumreglerna ska kunna fungera som ett verktyg för att skapa bättre design för gränssnittsutvecklare utan utbildning i ämnet.

The use of mobile devices has increased dramatically in recent years and the development of newtechnologies has made it difficult for developers to know what screen size and device the visitor isusing. This has resulted in the fact that today there is a problem with the interface for web pages onmobile devices. They are not adapted to the flexibility required for the interfaces to be recognizedon various mobile devices. Instead of developing two separate web pages, where one is designed formobile devices and one for desktop and keep them both continously updated, responsive webdesign simplifies the work process. Responsive web design is a flexible and dynamic interface thatadapts to mobile device and screen sizes.

Med responsiv webbdesign skapas en design som sedan dynamiskt anpassar sig till olika enheters skärmbredder, utan att specifika designer måste skapas för att få en anpassad layout till varje specifik enhet. De senaste åren har användandet av mobila enheter för surf på webben ökat och kraven som ställs på det mobila surfandet ökar med detta. Ett problem som uppstår med mobila enheter är att de trots sina små skärmar, använder samma högupplösta bilder som skapats för större skärmar. Detta medför att, trots omskalning av bilder för att responsivt anpassa bilden till enheten, så laddas en onödigt stor bild ned till enheten. Detta kan exempelvis p.g.a.